<template>
  <div class="m-layout" :class="{ collapsed }">
    <aside class="m-aside">
      <div class="brand" @click="goHome">
        <div class="logo">OB</div>
        <div class="brand-name">OceanBridge 商家</div>
      </div>
      <nav class="m-menu">
        <router-link to="/dashboard" class="m-menu-item">
          <span class="i">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <span class="t">工作台</span>
        </router-link>
        <router-link to="/product/list" class="m-menu-item">
          <span class="i">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7l9-4 9 4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="currentColor" stroke-width="2"/><path d="M3 7l9 4 9-4" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <span class="t">商品管理</span>
        </router-link>
        <router-link to="/order/list" class="m-menu-item">
          <span class="i">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <span class="t">订单管理</span>
        </router-link>
        <router-link to="/finance/overview" class="m-menu-item">
          <span class="i">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v18M8 7h5.5a3.5 3.5 0 1 1 0 7H10" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <span class="t">资金概览</span>
        </router-link>
        <router-link to="/settings/profile" class="m-menu-item">
          <span class="i">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="currentColor" stroke-width="2"/><path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="2"/></svg>
          </span>
          <span class="t">店铺设置</span>
        </router-link>
      </nav>
      <div class="m-menu-sep"></div>
      <button class="m-menu-item danger" @click="onLogout">
        <span class="i">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3" stroke="currentColor" stroke-width="2"/><path d="M16 17l5-5-5-5M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
        <span class="t">退出登录</span>
      </button>
      <!-- 展开/收起按钮：展开态显示文字按钮；收起态显示悬浮圆形按钮 -->
      <button class="collapse-btn" @click="toggle" v-show="!collapsed">{{ collapsed? '展开' : '收起' }}</button>
      <button class="fab-toggle" @click="toggle" v-show="collapsed" aria-label="Expand sidebar">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
    </aside>

    <main class="m-main">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const collapsed = ref(false)

function toggle(){ collapsed.value = !collapsed.value; localStorage.setItem('layout_collapsed', collapsed.value? '1':'0') }
function goHome(){ router.push('/dashboard') }
function onLogout(){
  localStorage.removeItem('merchant_accessToken');
  localStorage.removeItem('accessToken');
  localStorage.removeItem('merchant_userInfo');
  localStorage.removeItem('userInfo');
  ElMessage.success('已退出登录')
  router.replace('/login')
}

onMounted(()=>{ collapsed.value = localStorage.getItem('layout_collapsed')==='1' })
</script>

<style scoped>
.m-layout{ display:flex; min-height:100% }
.m-aside{ width: 220px; background:#0f172a; color:#cbd5e1; display:flex; flex-direction:column; border-right:1px solid #0b1220 }
.brand{ display:flex; align-items:center; gap:10px; height:56px; padding:0 14px; cursor:pointer; color:#e2e8f0 }
.brand .logo{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#2563eb,#0ea5e9); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff }
.brand-name{ font-weight:700; letter-spacing:.3px }
.m-menu{ padding:8px }
.m-menu-sep{ height:1px; background: #172033; margin: 6px 8px }
.m-menu-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; color:#cbd5e1; text-decoration:none; border-radius:10px; border:1px solid transparent }
.m-menu-item:hover{ background: rgba(255,255,255,.06); color:#fff }
.m-menu-item.router-link-active{ background: rgba(37,99,235,.18); color:#fff }
.m-menu-item.danger{ color:#fca5a5; border-color:#2a344a }
.collapse-btn{ margin: 8px; padding: 8px 10px; border-radius:8px; border:1px solid #243045; background:#111827; color:#cbd5e1; cursor:pointer }
.fab-toggle{ position: absolute; left: 16px; bottom: 16px; width:40px; height:40px; border-radius:50%; border:1px solid #243045; background:#0b1220; color:#cbd5e1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25) }

.m-main{ flex:1; min-width:0; background: var(--bg-page) }

/* collapsed */
.m-layout.collapsed .m-aside{ width: 64px; position: relative }
.m-layout.collapsed .brand-name, .m-layout.collapsed .m-menu-item .t, .m-layout.collapsed .collapse-btn{ display:none }

/* responsive */
@media (max-width: 768px){
  .m-aside{ position: sticky; left:0; top:0; height:100vh }
}
</style>

